<template>
    <Header></Header>
    <div style="width: 100%;background-color: #f4f5f7;">
        <div class="container">
            <div class="container-header">
                <div class="header-left">
                    <p style="width: 120px;" :class="indexName == 'userPhoto' ? 'active' : ''"
                        @click="tagChange('userPhoto')">
                        作品
                    </p>
                    <p v-if="isMy" style="width: 120px;" :class="indexName == 'information' ? 'active' : ''"
                        @click="tagChange('information')">
                        个人资料
                    </p>
                    <p v-if="isMy" style="width: 120px;" :class="indexName == 'like' ? 'active' : ''"
                        @click="tagChange('like')">
                        我的点赞
                    </p>
                    <p v-if="isMy" style="width: 120px;" :class="indexName == 'watch' ? 'active' : ''"
                        @click="tagChange('watch')">
                        浏览记录
                    </p>
                </div>
                <div class="header-right">

                    <el-dropdown max-height="120" @command="toFollow">
                        <div class="right-text">
                            <p>关注数</p>
                            <p>{{ follows.length }}</p>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item class="focus-none" v-for="follow in follows"
                                    :command="follow.followId">
                                    <el-avatar :size="24" :src="api.show + follow.avatar" />
                                    <el-text style="margin-left: 10px;">{{ follow.userName }}</el-text>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown max-height="120" @command="toFans">
                        <div class="right-text">
                            <p>粉丝数</p>
                            <p>{{ fans.length }}</p>
                        </div>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item class="focus-none" v-for="fan in fans" :command="fan.fansId">
                                    <el-avatar :size="24" :src="api.show + fan.avatar" />
                                    <el-text style="margin-left: 10px;">{{ fan.userName }}</el-text>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>

                </div>
            </div>
            <RouterView></RouterView>
        </div>

    </div>

</template>

<script setup>
import Header from '@/components/Header.vue'
import { useRoute } from 'vue-router';
import { ref, watch } from 'vue'
import api from './api';
import router from '@/router';
const route = useRoute()
const userId = ref(route.params.id)
const user = ref({})
const fans = ref([])
const follows = ref([])
const isMy = ref(userId.value == localStorage.getItem('userId') ? true : false)
// console.log(userId.value)

const indexName = ref(route.name)



const tagChange = (name) => {
    indexName.value = name
    router.replace({ name: name })

}

watch(
    [() => route.params.id, () => route.name],
    ([newId, newii], [oldId, oldii]) => {
        indexName.value = newii
        userId.value = newId;
        isMy.value = newId == localStorage.getItem('userId') ? true : false
        getUser()
        getFollows()
        getFans()
    }
);

const toFollow = (id) => {
    router.push({ name: 'userPhoto', params: { id: id } })
}
const toFans = (id) => {
    router.push({ name: 'userPhoto', params: { id: id } })
}

const getUser = () => {
    api.getUser(userId.value).then(res => {
        if (res.success) {
            user.value = res.data
            console.log(user.value)
        }
    })
}
const getFollows = () => {
    api.getFollows(userId.value).then(res => {
        if (res.success) {
            follows.value = res.datas
            console.log(follows.value)
        }
    })
}
const getFans = () => {
    api.getFans(userId.value).then(res => {
        if (res.success) {
            fans.value = res.datas
            console.log(fans.value)
        }
    })
}

getUser()
getFollows()
getFans()
</script>


<style>
.focus-none:not(.is-disabled):focus {
    background-color: white;
    color: #606266;
}

.el-tooltip__trigger {
    outline: none;
}

.container {
    width: 80%;
    margin: auto;
    padding-top: 5px;
    /* background-color: red; */
    height: 88vh;
}

.container .container-header {
    width: 100%;
    height: 66px;
    padding: 0 20px;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

.container .container-header .header-left {
    height: 66px;
    width: 240px;
    text-align: center;
    line-height: 66px;
    position: absolute;
    color: #222;
    font-size: 13px;

    display: flex;
    justify-content: start;
}

.container .container-header .header-left:hover {
    cursor: pointer;
}

.container .container-header .active {
    color: #00a1d6;
    border-bottom: #00a1d6 3px solid;
}

.container .container-header .header-right {
    display: flex;
    justify-content: space-between;
    width: 230px;
    text-align: center;
    font-size: 14px;
    color: #888;
    top: 14px;
    right: 133px;
    position: absolute;
}

.container .container-header .header-right .right-text {
    line-height: 19px;
    height: 19px;
    color: #888;
}
</style>